<template>
  <div id="cesiumContainer"></div>
</template>

<script>
export default {
  name: 'WallGeometry',
  mounted() {
    let viewer = this.initCesium()

    this.addWallGeometry(viewer)
  },
  methods: {
    initCesium: function () {
      Cesium.Ion.defaultAccessToken =
        'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJkZjg4ZjljZC1mZGM3LTRlZjEtYjg3MC00MjZkNGU3YjI5ZWUiLCJpZCI6MTU5NTIsImlhdCI6MTYwNTE0ODM5OX0.LjxeKrgAo7Ksk8405kSAhYwF0nKcF2w2DGJnKHh51N8'
      let viewer = new Cesium.Viewer('cesiumContainer', {
        animation: false,
        baseLayerPicker: false,
        fullscreenButton: false,
        geocoder: false,
        homeButton: false,
        infoBox: true,
        sceneModePicker: false,
        navigationHelpButton: false,
        scene3DOnly: true,
        timeline: false,
        selectionIndicator: false, //是否显示选取指示器组件
        shouldAnimate: false, //自动播放动画控件
        shadows: true, //是否显示光照投射的阴影
        terrainShadows: Cesium.ShadowMode.RECEIVE_ONLY, //地质接收阴影
        sceneMode: Cesium.SceneMode.SCENE3D,
        clock: new Cesium.Clock(),
        terrainProvider: new Cesium.EllipsoidTerrainProvider()
      })
      viewer._cesiumWidget._creditContainer.style.display = 'none' //	去除版权信息
      return viewer
    },
    addWallGeometry(viewer) {
      // create a wall that spans from ground level to 10000 meters
      let wall1 = new Cesium.WallGeometry({
        positions: Cesium.Cartesian3.fromDegreesArrayHeights([-95.0, 50.1, 10000.0, -85.0, 50.1, 10000.0, -75.0, 50.1, 10000.0])
      })
      let geometry1 = Cesium.WallGeometry.createGeometry(wall1)

      let polygonInstance1 = new Cesium.GeometryInstance({
        geometry: geometry1,
        attributes: {
          color: Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.RED)
        },
        id: 'polygonInstance1'
      })

      // create a wall that spans from 10000 meters to 20000 meters
      let wall2 = Cesium.WallGeometry.fromConstantHeights({
        positions: Cesium.Cartesian3.fromDegreesArray([-95.0, 50.0, -85.0, 50.0, -75.0, 50.0]),
        minimumHeight: 20000.0,
        maximumHeight: 10000.0
      })
      let geometry2 = Cesium.WallGeometry.createGeometry(wall2)

      let polygonInstance2 = new Cesium.GeometryInstance({
        geometry: geometry2,
        attributes: {
          color: Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.AQUA)
        },
        id: 'polygonInstance2'
      })

      let primitive = new Cesium.Primitive({
        geometryInstances: [polygonInstance1, polygonInstance2],
        asynchronous: false, //是否采用多线程
        appearance: new Cesium.PerInstanceColorAppearance({
          translucent: false, //半透明
          flat: true //当 true 时，片段着色器中将使用平面阴影，这意味着不考虑光照
        })
      })

      viewer.scene.primitives.add(primitive)
    }
  }
}
</script>
